<script setup>
import { reactive, computed,ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
//import { MobileNumberValidator, PasswordValidator } from '@/core/utils/Validator'
import { message } from 'ant-design-vue'
const store = useStore(), router = useRouter(), route = useRoute()
const enable = ref(true)
// 表单内容
const formState = reactive({
  userName: 'admin',
  password: 'passwd',
  remember: true,
})
// 表单验证成功处理
const onFinish = async values => {
  enable.value = false
  store.dispatch('asyncHasRoute', false)
  store.dispatch('auth/login', values).then(res => {
    message.success(res, 2, () => {
      const query = route.query
      const redirect = query.redirect ?? '/'
      const queryParams = Object.keys(query).reduce(
        (acc, cur) => {
          if (cur !== 'redirect') {
            acc[cur] = query[cur]
          }
          return acc
        },
        {}
      )
      router.push({ path: redirect, query: queryParams })
      //router.push('/dashboard')
    })
  }).finally(()=>{
    enable.value = true
  })
  //console.log('Success:', values)
}
// 表单验证失败处理
const onFinishFailed = errorInfo => {
  //alert(JSON.stringify(errorInfo))
  console.log('Failed:', errorInfo)
}
const disabled = computed(() => {
  return !(formState.userName && formState.password && enable.value)
})
</script>
<template>
  <div class="login">
    <div class="panel">
      <div class="desc">
        <div class="loadRun min" /><div class="loadRun max" />
        <div class="title">Just for Change</div>
        <!-- <div id="shiny-shadow">
          <button><span>鼠标悬停</span></button>
        </div> -->
        <div class="btn1">
          按钮
          <span />
          <span />
          <span />
          <span />
        </div>
      </div>
      <div class="from btn1">
        <a-form
          :model="formState"
          :no-style="true"
          name="normalLogin"
          :scroll-to-first-error="true"
          @finish="onFinish"
          @finish-failed="onFinishFailed">
          <a-form-item
            name="userName"
            :rules="[{ required: true, message: 'Please input your username!' }]"
          >
            <a-input v-model:value="formState.userName" autocomplete="off" placeholder="用户名" size="large">
              <template #prefix>
                <UserOutlined class="site-form-item-icon" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item
            name="password"
            :rules="[{ required: true, message: 'Please input your password!' }]">
            <a-input-password v-model:value="formState.password" autocomplete="off" placeholder="密码" size="large">
              <template #prefix>
                <LockOutlined class="site-form-item-icon" />
              </template>
            </a-input-password>
          </a-form-item>
          <a-form-item>
            <a-form-item name="remember" no-style>
              <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
            </a-form-item>
            <a class="login-form-forgot" href="">Forgot password</a>
          </a-form-item>

          <a-form-item>
            <a-button :disabled="disabled" type="primary" html-type="submit" block>
              Log in
            </a-button>
            Or
            <a href="">register now!</a>
          </a-form-item>
        </a-form>
        <span />
        <span />
        <span />
        <span />
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
/**Placeholder占位文字添加CSS样式 */
input[type="text"]::-webkit-input-placeholder {color:green; }
input[type="text"]::-moz-placeholder {color:green;} /* firefox 19+ */
input[type="text"]:-moz-placeholder {color:green;}
input[type="text"]:-ms-input-placeholder {color:green;} /* ie */ 
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
  width: 100%;
  height: 100%;
  background: rgb(248, 246, 248);
}
.panel {
  width: 800px;
  min-height: 300px;
  padding:20px;
  background-color: #a9d3cbde;
  border-radius: 10px;
  display: flex;
  flex-flow: row  nowrap;
  justify-content: space-between;
  box-shadow: 6px 16px 10px #5b5c5a;
  .desc {
    position: relative;
    width: 100%;
    .title{
      font-size: 24px; color: rgb(213, 41, 146);
      font-weight: bolder;
      position:absolute;
      top: 5px;
      animation: animated-border 1.5s infinite;
    }
    /* 首字母大 */
    .title:first-letter { 
      font-size: 200%;
      color: #8A2BE2;
    }
  }
  .from {
    border: 2px solid #d4d2d2;
    background-color: #ffffff;
    border-radius: 10px;
    margin: -55px 0px;
    padding: 50px 30px;
    width: 350px;
  }
}
.loadRun.max {
  width: 50px; height: 50px;
}
.loadRun {
    position: relative;
    width: 30px;
    height: 30px;
    background: #dac3c33b;
    border-radius: 50%;
    box-shadow: inset 0.1em -0.1em #ffffff;
    animation: spin 1s linear infinite;
  }
  .loadRun:before,
  .loadRun:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    box-shadow: inherit;
  }
 .loadRun:before { filter: blur(5px);  }
.loadRun:after { filter: blur(10px); }
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
@keyframes animated-border {
  0% {   box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);   }
  100% {   box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);  }
}

#shiny-shadow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  background: #1c2541;
  button {
    border: 2px solid white;
    background: transparent;
    text-transform: uppercase;
    color: white;
    padding: 15px 50px;
    outline: none;
    position: relative;
    overflow: hidden;
  }

  span {
    z-index: 20;
  }

  button:after {
    content: '';
    display: block;
    position: absolute;
    background: white;
    width: 50px;
    height: 125px;
    opacity: 20%;
    transform: rotate(-45deg);
    top: -36px;
    left: -100px;
  }

  button:hover:after {
    left: 120%;
    transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
    -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
  }
} 
 .btn1 {
    padding: 10px 20px;
    margin-top: 30px;
    color: #91d1d4;
    position: relative;
    overflow: hidden;
    transition: all 1s;
  }
  .btn1:hover {
    background-color: #91d1d4;
    border-radius: 5px;
    color: #fff;
    opacity: 0.5;
    transition: all 1s;
    /* text-transform: uppercase; */
    /* 文字大写 */
  }
  .btn1>span {
    position: absolute;
  }
  .btn1>span:nth-child(1) {
    width: 100%;
    height: 2px;
    background-image: linear-gradient(to right, transparent, #59f844);
    left: -100%;
    top: 0;
    animation: span-line-one 2s linear infinite;
  }

  .btn1>span:nth-child(2) {
    width: 2px;
    height: 100%;
    background-image: linear-gradient(to bottom, transparent, #59f844);
    right: 0;
    top: -100%;
    /* 延迟 0.25s */
    animation: span-line-two 2s 0.5s linear infinite;
  }
  .btn1>span:nth-child(3) {
    width: 100%;
    height: 2px;
    background-image: linear-gradient(to left, transparent, #03e9f4);
    left: 100%;
    bottom: 0;
    /* 延迟 0.5s */
    animation: span-line-three 2s 1s linear infinite;
  }
  .btn1>span:nth-child(4) {
    width: 2px;
    height: 100%;
    background-image: linear-gradient(to top, transparent, #03e9f4);
    left: 0;
    bottom: -100%;
    /* 延迟 0.75s */
    animation: span-line-four 2s 1.5s linear infinite;
  }
  @keyframes span-line-one { 50%,100% { left: 100%; }}
  @keyframes span-line-two { 50%,100% { top: 100%; }}
  @keyframes span-line-three { 50%, 100% { left: -100%; }}
  @keyframes span-line-four { 50%, 100% { bottom: 100%; }}
</style>